<template>
  <div class="tl pd_20" v-loading="load">
    <!-- 基本信息 -->
    <div class="add_con_item bor bg_write mar_bottom_25 clearfix">
      <h5>基本信息</h5>
      <el-form :label-position="labelPosition" label-width="120px">
        <el-form-item label="房产栏目">
          <el-col :span="8">
            <el-col :span="24">
              <el-col :span="24" class="mr">
                <el-cascader
                  :options="option"
                  :props="optionProps"
                  :show-all-levels="false"
                  change-on-select
                  style="width:100%"
                  v-model="treeList"
                  @change="changeCate"
                  placeholder="请选择栏目"
                ></el-cascader>
              </el-col>
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item label="标题">
          <el-col :span="10">
            <el-input v-model="estate.title"></el-input>
          </el-col>
          <el-col class="tr col_label" :span="4">交房日期&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="3">
            <el-date-picker
              v-model="estate.expected_delivery"
              type="date"
              style="width:100%"
              placeholder="选择日期">
            </el-date-picker>
          </el-col>
        </el-form-item>

         <el-form-item label="房产标签">

            <el-tag
                type="danger"
                :key="i"
                v-for="(tag,i) in dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)"
              >{{tag}}</el-tag>
              
             <el-input
                class="input-new-tag"
               v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              ></el-input>

            <el-button v-else class="button-new-tag"  size="small" @click="showInput">+</el-button>

        </el-form-item>

        <el-form-item label="最低成交价格">
          <el-col :span="3">
            <el-input v-Int v-model="estate.min_price"></el-input>
          </el-col>
          <el-col :span="1" class="danjia">万</el-col>
          <el-col class="tr col_label" :span="3">最高成交价格&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="3">
            <el-input v-Int v-model="estate.max_price"></el-input>
          </el-col>
          <el-col :span="1" class="danjia">万</el-col>
          <el-col class="tr col_label" :span="3">物业特色&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="3">
            <el-input  v-model="estate.property_features"></el-input>
          </el-col>
          <el-col :span="24"></el-col>
        </el-form-item>

        <el-form-item label="主力户型">
          <el-col :span="3">
            <el-input  v-model="estate.main_unit"></el-input>
          </el-col>
          <el-col :span="1" class="danjia"></el-col>
          <el-col class="tr col_label" :span="4">产权年限&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="3">
            <el-input v-Int v-model="estate.property_age"></el-input>
          </el-col>
          <el-col :span="1" class="danjia">年</el-col>
          <el-col class="tr col_label" :span="3">物业类型&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="3">
            <el-input  v-model="estate.property_type"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="装修情况">
          <el-col :span="3">
            <el-input  v-model="estate.renovation_condition"></el-input>
          </el-col>
          <el-col :span="1" class="danjia"></el-col>
          <el-col class="tr col_label" :span="4">占地面积&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="3">
            <el-input v-Int v-model="estate.floor_area"></el-input>
          </el-col>
          <el-col :span="1" class="danjia">m²</el-col>
          <el-col class="tr col_label" :span="3">建筑面积&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="3">
            <el-input v-Int v-model="estate.construction_area"></el-input>
          </el-col>
          <el-col :span="1" class="danjia">m²</el-col>
        </el-form-item>


         <el-form-item label="建筑类型">
          <el-col :span="3">
            <el-input  v-model="estate.building_type"></el-input>
          </el-col>
          <el-col :span="1" class="danjia"></el-col>
          <el-col class="tr col_label" :span="4">绿化率&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="3">
            <el-input v-Int v-model="estate.greening_rate"></el-input>
          </el-col>
          <el-col :span="1" class="danjia">%</el-col>
          <el-col class="tr col_label" :span="3">容积率&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="3">
            <el-input v-Int v-model="estate.volume_rate"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="车位数">
          <el-col :span="3">
            <el-input v-Int v-model="estate.number_of_cars"></el-input>
          </el-col>
          <el-col :span="1" class="danjia"></el-col>
          <el-col class="tr col_label" :span="4">规划户数&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="3">
            <el-input v-Int v-model="estate.planning_households"></el-input>
          </el-col>
          <el-col :span="1" class="danjia">户</el-col>
          <el-col class="tr col_label" :span="3">物业费&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="3">
            <el-input v-Int v-model="estate.property_costs"></el-input>
          </el-col>
          <el-col :span="1" class="danjia">元/m²</el-col>
        </el-form-item>

        <el-form-item label="物业公司">
          <el-col :span="3">
            <el-input  v-model="estate.property_company"></el-input>
          </el-col>
          <el-col :span="1" class="danjia"></el-col>
          <el-col class="tr col_label" :span="4">开发商&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="3">
            <el-input  v-model="estate.developer"></el-input>
          </el-col>

          <el-col class="tr col_label" :span="4">售楼处&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="3">
            <el-input  v-model="estate.sales_office"></el-input>
          </el-col>
        </el-form-item>



      </el-form>
    </div>
    <!-- 主图轮播图 -->
    <div class="add_con_item bor bg_write mar_bottom_25 clearfix">
      <h5>图片上传</h5>
      <el-form
        :label-position="labelPosition"
        ref="uploadElement"
        label-width="120px"
        :model="estate"
      >
        <el-col :span="24" class="mar_bottom_20">
          <el-col :span="24" class="add_prod_img">
            <ul class="el-upload-list el-upload-list--picture-card">
              <li
                class="el-upload-list__item is-success zu"
                v-for="(item,index) in fileList"
                :class="{zhuTu:zhuIndex===index}"
                :key="index+Math.random()"
              >
                <img :src="$fnc.getImgUrl(item.url)" alt class="el-upload-list__item-thumbnail" />
                <a class="el-upload-list__item-name">
                  <i class="el-icon-document"></i>
                </a>
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview">
                    <i @click="detailsImg(item)" class="el-icon-zoom-in"></i>
                  </span>
                  <span class="el-upload-list__item-delete">
                    <i @click="deleteImg(item,index)" class="el-icon-delete"></i>
                  </span>
                  <span class="el-upload-list__item-delete">
                    <i @click="setZhutu(item,index)" class="fmt">设置主图</i>
                  </span>
                </span>
                <p>主图</p>
                <el-progress
                  v-if="item.imgPercent<100"
                  class="video_jindu_shop"
                  type="circle"
                  :percentage="item.imgPercent"
                ></el-progress>
              </li>
            </ul>
            <span>
              <uploadpic
                :shop_list="fileList"
                :width="150"
                :height="150"
                :real_width="640"
                :real_height="640"
                :is_more="true"
                :is_shop="true"
                :is_tip="false"
                @send_pic="onSuccess_shop"
              ></uploadpic>
              <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible">
                <img width="100%" :src="$fnc.getImgUrl(dialogImageUrl)" alt />
              </el-dialog>
            </span>
          </el-col>
        </el-col>
      </el-form>
    </div>

    <!-- 周边配套 -->
    <div class="add_con_item bor bg_write mar_bottom_25 clearfix">
      <h5>周边配套</h5>
      <el-form
        :label-position="labelPosition"
        ref="uploadElement"
        label-width="120px"
        :model="estate"
      >
        <el-col :span="24" class="mar_bottom_20">
          <el-col :span="24" class="add_prod_img">
            <ul class="el-upload-list el-upload-list--picture-card">
              <li
                class="el-upload-list__item is-success zu"
                v-for="(item,index) in fileList1"
                :key="index+Math.random()"
              >
                <img :src="$fnc.getImgUrl(item.url)" alt class="el-upload-list__item-thumbnail" />
                <a class="el-upload-list__item-name">
                  <i class="el-icon-document"></i>
                </a>
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview">
                    <i @click="detailsImg1(item)" class="el-icon-zoom-in"></i>
                  </span>
                  <span class="el-upload-list__item-delete">
                    <i @click="deleteImg1(item,index)" class="el-icon-delete"></i>
                  </span>
                </span>
                <el-progress
                  v-if="item.imgPercent<100"
                  class="video_jindu_shop"
                  type="circle"
                  :percentage="item.imgPercent"
                ></el-progress>
              </li>
            </ul>
            <span>
              <uploadpic
                :shop_list="fileList1"
                :width="150"
                :height="150"
                :real_width="640"
                :real_height="640"
                :is_more="true"
                :is_shop="true"
                :is_tip="false"
                @send_pic="onSuccess_shop1"
              ></uploadpic>
              <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible">
                <img width="100%" :src="$fnc.getImgUrl(dialogImageUrl)" alt />
              </el-dialog>
            </span>
          </el-col>
        </el-col>
      </el-form>
    </div>

     <!-- 主力户型 -->
    <div class="add_con_item bor bg_write mar_bottom_25 clearfix">
      <h5>周边配套</h5>
      <el-form
        :label-position="labelPosition"
        ref="uploadElement"
        label-width="120px"
        :model="estate"
      >
        <el-col :span="24" class="mar_bottom_20">
          <el-col :span="24" class="add_prod_img">
            <ul class="el-upload-list el-upload-list--picture-card">
              <li
                class="el-upload-list__item is-success zu"
                v-for="(item,index) in fileList2"
                :key="index+Math.random()"
              >
                <img :src="$fnc.getImgUrl(item.url)" alt class="el-upload-list__item-thumbnail" />
                <a class="el-upload-list__item-name">
                  <i class="el-icon-document"></i>
                </a>
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview">
                    <i @click="detailsImg2(item)" class="el-icon-zoom-in"></i>
                  </span>
                  <span class="el-upload-list__item-delete">
                    <i @click="deleteImg2(item,index)" class="el-icon-delete"></i>
                  </span>
                </span>
                <el-progress
                  v-if="item.imgPercent<100"
                  class="video_jindu_shop"
                  type="circle"
                  :percentage="item.imgPercent"
                ></el-progress>
              </li>
            </ul>
            <span>
              <uploadpic
                :shop_list="fileList1"
                :width="150"
                :height="150"
                :real_width="640"
                :real_height="640"
                :is_more="true"
                :is_shop="true"
                :is_tip="false"
                @send_pic="onSuccess_shop2"
              ></uploadpic>
              <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible">
                <img width="100%" :src="$fnc.getImgUrl(dialogImageUrl)" alt />
              </el-dialog>
            </span>
          </el-col>
        </el-col>
      </el-form>
    </div>

    <!-- <div class="add_con_item bor bg_write mar_bottom_25 clearfix" style="overflow:hidden">
      <h5 style="display: inline ">楼盘动态</h5>
      <el-row type="flex" :gutter="15" style="    justify-content: center;">
        <div :span="6" style="padding-right:30px">
          <div id="diy-phone">
            <div class="diy-phone-header">
              <i class="diy-phone-receiver"></i>
              <div class="diy-phone-title j-pagetitle"></div>
            </div>
            <div class="diy-phone-contain" id="j-materialPrev">
              <dl class="materialPrePanel product_phone mgt20">
                <dt>
                  <div class="single-summary" v-html="estate.content"></div>
                </dt>
              </dl>
            </div>
            <i class="diy-phone-footer"></i>
          </div>
        </div>
        <div :span="12" style="margin-top: 40px;">
          <ue
            v-model="estate.content"
            v-loading="loadding1"
            v-if="!loadding1"
            :value="estate.content"
            style="width:375px"
            upload-url="/api/common/upload/index/"
            fileName="file"
          />
        </div>
      </el-row>
    </div> -->

    <div id="d1" class="d1"></div>
    <el-col :span="22" class="men_add tc">
      <el-card shadow="always">
        <el-button
          :loading="$store.state.isLoading"
          @click="addProductItem"
          @keydown.13="addProductItem"
        >确认保存添加产品</el-button>
      </el-card>
    </el-col>
    <el-button :loading="$store.state.isLoading" @click="addProductItem">添加</el-button>

    <!-- vueCropper 剪裁图片实现-->
    <el-dialog :close-on-click-modal="false" top="20px" title="图片剪裁" :visible.sync="dialogimg">
      <div class="cropper-content">
        <div class="cropper" style="text-align:center">
          <vueCropper
            ref="cropper"
            :img="crooption.img"
            :outputSize="crooption.size"
            :outputType="crooption.outputType"
            :info="true"
            :full="crooption.full"
            :canMove="crooption.canMove"
            :canMoveBox="crooption.canMoveBox"
            :original="crooption.original"
            :autoCrop="crooption.autoCrop"
            :fixed="crooption.fixed"
            :fixedNumber="crooption.fixedNumber"
            :centerBox="crooption.centerBox"
            :infoTrue="crooption.infoTrue"
            :fixedBox="crooption.fixedBox"
          ></vueCropper>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="$store.state.isLoading" @click="dialogimg = false">取 消</el-button>
        <el-button :loading="$store.state.isLoading" type="primary" @click="finish">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import ueditor from '@/components/ueditor/Ueditor.vue';

import switchc from "@/components/currency/Swich.vue";
// eslint-disable-next-line no-unused-vars
import ImageCompressor from "image-compressor.js"; // 引入图片压缩
import editor from "@/components/currency/editor.vue";
import { Loading } from "element-ui";
import axios from "axios";

import compressimgUpload from "@/components/currency/compressimgUpload.vue";

import ue from "@/components/currency/Ue/ue.vue";
import uploadpic from "@/components/page/pic/up_pic";
export default {
  data() {
    return {
      treeList: [],
       dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      estate:{
          title:'',//房产标题
          sub_title:'',//房产标签
          min_price:"",//最低成交价格
          max_price:"",//最高成交价格
          cate_id:'',//分类id
          piclink:'',//主图
          content:'',//楼盘动态
          property_features:'',//物业特色
          main_unit:'',//主力户型
          property_age:'',//产权年限
          property_type:'',//物业类型

          expected_delivery:'',//交房时间
          renovation_condition:'',//装修情况
          floor_area:"",//占地面积,单位：平方米
          construction_area:"",//建筑面积,单位：平方米
          building_type:'',//建筑类型
          greening_rate:'',//绿化率,单位：百分比
          volume_rate:'',//容积率
          number_of_cars:'',//车位数
          planning_households:'',//规划户数
          property_costs:'',//物业费,单位：元/平方米
          property_company:'',//物业公司
          developer:'',//开发商
          sales_office:'',//售楼处



      },
      loadding1: true,
      shopdetail_type: false,
      dialogimg: false,
      labelPosition: "right",
      load: false,
      dialogVisible: false,
      bothRating: false,
      dialogImageUrl: "",
      show: "block",
      op: [],
      option: [],
      optionProps: {
        value: "id",
        label: "title",
        children: "z"
      },
      optionPropsku: {
        value: "id",
        label: "title"
      },
      fileList: [],
      fileList1:[],
      fileList2:[],
      shops: [],
      dialogImageUrl: "",
      dialogVisible: false,
      zhuIndex: -1,
      imgPercent: "0%",
      videoFlag: false,
      cateOption: [],
      imgQuality: 0.1862,
      crooption: {
        img: "", // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量
        outputType: "png", // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: "", // 默认生成截图框宽度
        autoCropHeight: "", // 默认生成截图框高度
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [4, 4],
        // 截图框的宽高比例
        full: true,
        original: false, // 上传图片按照原始比例渲染
        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        centerBox: true
      },

    };
  },
  methods: {
     handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },

    changeCate(e){
      this.estate.cate_id=e[e.length-1]
    },
    onSuccess_shop(shop_list) {
      this.fileList = this.fileList.concat(shop_list);
    },
    onSuccess_shop1(shop_list){
      this.fileList1 = this.fileList1.concat(shop_list);
    },
    onSuccess_shop2(shop_list){
      this.fileList2 = this.fileList2.concat(shop_list);
    },

    onSuccess(pic) {
      var id = this.sku_selid;
      for (var i in this.skuImgListsYw) {
        if (id == this.skuImgListsYw[i].id) {
          this.skuImgListsYw[i].piclink = pic;
          if(pic == ''){
            this.skuImgListsYw.splice(this.skuImgListsYw.findIndex(e => e.piclink === ''), 1)
          }
        }
      }
    },
    change_shop_input() {
      this.shopdetail_type = !this.shopdetail_type;
    },
    beforeupload(file) {
      this.crooption.img = URL.createObjectURL(file);
      this.dialogimg = true;
      return false;
    },
    finish() {
      var that = this;
      this.$refs.cropper.getCropData(data => {
        this.dialogimg = false;
        // 先将显示图片地址清空，防止重复显示
        this.crooption.img = "";
        // var reader = new FileReader();
        //创建一个img对象
        var img = new Image();

        img.src = data;
        // base64地址图片加载完毕后执行
        img.onload = function() {
          // 缩放图片需要的canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来）
          var canvas = document.createElement("canvas");
          var context = canvas.getContext("2d");
          // 图片原始尺寸
          var originWidth = this.width;
          var originHeight = this.height;
          // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
          var maxWidth = 750,
            maxHeight = 750;
          // 目标尺寸
          var targetWidth = originWidth,
            targetHeight = originHeight;
          // 图片尺寸超过最大尺寸的限制
          if (originWidth > maxWidth || originHeight > maxHeight) {
            if (originWidth / originHeight > maxWidth / maxHeight) {
              // 更改宽度，按照宽度限定尺寸
              targetWidth = maxWidth;
              targetHeight = Math.round(
                maxWidth * (originHeight / originWidth)
              );
            } else {
              targetHeight = maxHeight;
              targetWidth = Math.round(
                maxHeight * (originWidth / originHeight)
              );
            }
          }
          //对图片进行缩放
          canvas.width = targetWidth;
          canvas.height = targetHeight;
          // 清除画布
          context.clearRect(0, 0, targetWidth, targetHeight);
          // 图片压缩
          context.drawImage(img, 0, 0, targetWidth, targetHeight);
          /*第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高*/
          //压缩后的base64文件
          var newUrl = canvas.toDataURL("image/jpeg", 0.92);
          let file = that.convertBase64UrlToBlob(newUrl);
          var fd = new FormData();
          fd.append("file", file, "file_" + Date.parse(new Date()) + ".jpg");
          fd.append("folder", "product");

          let config = {
            headers: { "Content-Type": "multipart/form-data" }
          };

          axios.post("/api/common/upload/index/", fd, config).then(res => {
            if (res.data) {
              that.fileList.push({ url: res.data.result });
              console.log("1", that.fileList);
            } else {
              this.$message.error("图片上传失败");
              // that.fileList = [] ;
              console.log("2", that.fileList);
            }
          });
        };
      });
    },
    convertBase64UrlToBlob(urlData) {
      let bytes = window.atob(urlData.split(",")[1]); //去掉url的头，并转换为byte
      //处理异常,将ascii码小于0的转换为大于0
      let ab = new ArrayBuffer(bytes.length);
      let ia = new Uint8Array(ab);
      for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
      }
      return new Blob([ab], { type: "image/png" });
    },
    getProductList() {
      var params = {};
      params.parent_id = "";
      this.$api.getEstate.getEstateCateTreeList(params).then(res => {
        if (res.data.code == 200 && res.data.status == 1 && res.data.result) {
          this.option = res.data.result;
          this.getUpdataItem();
        }
      });
    },
    deleteImg(item, index) {
      var _this = this;

      this.$confirm("确定删除吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (this.zhuIndex == index) {
            this.zhuIndex = -1;
          }
          const currRow = _this.fileList.splice(index, 1)[0];
          var id = item.id || "0";
          if (id == "0") {
            _this.$message.success("删除成功");
            // _this.fileList.splice(index, xIndex);

            this.estate.piclink = "";
          } else {
            var params = {};
            params.id = id;
            _this.$api.getShops.delImg(params).then(res => {
              if (res.data.code == 200 && res.data.result) {
                _this.$message.success("删除成功");
              } else {
                _this.fileList.splice(index, 1);
                _this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
              }
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    detailsImg(item) {
      this.dialogVisible = true;
      this.dialogImageUrl = item.url;
    },
    deleteImg1(item, index) {
      var _this = this;

      this.$confirm("确定删除吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {

          const currRow = _this.fileList1.splice(index, 1)[0];
          var id = item.id || "0";
          if (id == "0") {
            _this.$message.success("删除成功");
            // _this.fileList.splice(index, xIndex);
          } else {
            console.log(id)
            var params = {};
            params.id = id;
            _this.$api.getShops.delImg(params).then(res => {
              if (res.data.code == 200 && res.data.result) {
                _this.$message.success("删除成功");
              } else {
                _this.fileList1.splice(index, 1);
                _this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
              }
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    detailsImg1(item) {
      this.dialogVisible = true;
      this.dialogImageUrl = item.url;
    },
     deleteImg2(item, index) {
      var _this = this;

      this.$confirm("确定删除吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {

          const currRow = _this.fileList2.splice(index, 1)[0];
          var id = item.id || "0";
          if (id == "0") {
            _this.$message.success("删除成功");
            // _this.fileList.splice(index, xIndex);
          } else {
            console.log(id)
            var params = {};
            params.id = id;
            _this.$api.getShops.delImg(params).then(res => {
              if (res.data.code == 200 && res.data.result) {
                _this.$message.success("删除成功");
              } else {
                _this.fileList2.splice(index, 1);
                _this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
              }
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    detailsImg2(item) {
      this.dialogVisible = true;
      this.dialogImageUrl = item.url;
    },
    setZhutu(item, index) {
      this.zhuIndex = index;
      // item.iszhutu=true;

      for (var i in this.fileList) {
        if (index == i) {
          this.fileList[i].isZhu = true;
        } else {
          this.fileList[i].isZhu = false;
        }
      }
    },
    addProductItem() {

      //   this.load = true;
      var params = {};
      params = this.estate;
      console.log(this.dynamicTags)
      if(this.dynamicTags.length>0){
        params.sub_title=this.dynamicTags.join()
      }
      delete this.estate.cate_father;

      var imgArr = [];
      var imglist = JSON.parse(JSON.stringify(this.fileList));
      for (var i in imglist) {
        if (imglist[i].isZhu) {
          params.piclink = imglist[i].url;
          if (imglist[i].id) {
            this.$api.getShops.delImg({ id: imglist[i].id }).then(res => {
              if (res.data.code == 200) {
              } else {
                this.$message.error("添加失败，图片错误");
                return false;
              }
            });
          }
          imglist.splice(i, 1);
        }
      }

      imglist.filter(item => {
        item.piclink = item.url;
      });
      console.log(imglist)

      params.img_json = JSON.stringify(imglist);

      this.fileList1.filter(item=>{
        item.piclink=item.url;
      })

      params.img_json2 = JSON.stringify(this.fileList1);

      this.fileList2.filter(item=>{
        item.piclink=item.url;
      })

      params.img_json3 = JSON.stringify(this.fileList2);

      if (params.id) {
        this.$api.getEstate.saveEditEstate(params).then(res => {
          if (res.data.code == 200 && res.data.result) {
            this.$fnc.alertSuccess({
              text: "修改成功",
            });
          } else {
            this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
          }
        });
      } else {
        this.$api.getEstate.addEstate(params).then(res => {
          if (res.data.code == 200 && res.data.result) {
            this.$fnc.alertSuccess({
              text: "添加成功",
            });
          } else {
            this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
          }
        });
      }
      this.load = false;
    },
    getUpdataItem() {
      var id = this.$route.query.id || '';
      if(!id){
        this.load=false;
        this.loadding1 = false;
        return;
      }
      var params = { id: id };
      this.$api.getEstate.editEstate(params).then(res => {
        if (res.data.code == 200 && res.data.status == 1) {
          this.estate = res.data.result;
          this.treeList = res.data.result.cate_father;
          if(res.data.result.sub_title){
            this.dynamicTags=res.data.result.sub_title.split(',')
          }
          var imgList = [];
          if (this.estate.piclink != "") {
            res.data.result.img_json.unshift({
              piclink: this.estate.piclink,
              isZhu: true
            });
            this.zhuIndex = 0;
          }
          imgList = res.data.result.img_json;



          for (var i in imgList) {
            var imgObj = {};
            imgObj.id = imgList[i].id;
            if (imgList[i].isZhu) {
              imgObj.isZhu = true;
            } else {
              imgObj.isZhu = false;
            }

            imgObj.url = this.$fnc.getImgUrl(imgList[i].piclink);
            this.fileList.push(imgObj);
          }

          if(typeof this.estate.img_json2=='object'){
            var obj={};
            for(var i in this.estate.img_json2){
              obj=this.estate.img_json2[i];
              obj.url = this.$fnc.getImgUrl(this.estate.img_json2[i].piclink);
              this.fileList1.push(obj);
            }
          }

          if(typeof this.estate.img_json3=='object'){
            var obj={};
            for(var i in this.estate.img_json3){
              obj=this.estate.img_json3[i];
              obj.url = this.$fnc.getImgUrl(this.estate.img_json3[i].piclink);
              this.fileList2.push(obj);
            }
          }

          console.log(this.fileList1)

            // }
          this.load=false;
          this.loadding1 = false;
        } else {
          this.$fnc.alertError(res.data.result);
          setTimeout(() => {
            this.$router.push("/index/estate/lists");
          }, 500);
        }
      });
    },
  },

  components: {
    editor,
    switchc,
    compressimgUpload,
    ue,
    uploadpic
  },
  created() {
    this.load=true;
    this.getProductList();
  },
  mounted() {}
};
</script>


<style lang="less" scoped>
.tag {
  width: 148px;
  color: #fff;
  margin-bottom: 1rem;
  background: #4ca9ff;
  text-align: center;
  border-radius: 3px;
}
.checkFirst {
  margin-left: 1.875rem;
}
.head_color {
  background: #333;
}
.fade-enter-active,
.fade-leave-active {
  transition: height 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  height: 0;
}
.childTabs {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
// 截图
.cropper-content {
  .cropper {
    width: auto;
    height: 800px;
  }
}
.materialPrePanel {
  max-height: 468px;
  overflow: auto;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
